<template>
  <div class="container">
    <img class="wkimg" src="@/assets/images/800.gif" alt="" />
    <img class="wkimg2" src="@/assets/images/801.gif" alt="" />

    <div class="wbox zbox" style="top: 35vh">
      <div class="w1">
        <div class="w11">
          <img src="@/assets/images/usdt.png" alt="" />
          <span>USDT</span>
        </div>
        <div class="w12">{{ infos.balance }}</div>
      </div>
      <div class="w1">
        <div class="w11">
          <img src="@/assets/images/vip.png" alt="" />
          <span>{{ $t("all.dangqiandengji") }}</span>
        </div>
        <div class="w12" style="font-style: italic; color: #eacc36">
          Lv{{ infos.level }}
        </div>
      </div>
      <div class="w1">
        <div class="w11">
          <img src="@/assets/images/chui2.png" alt="" />
          <span>{{ $t("all.shengyucishu") }}</span>
        </div>
        <div class="w12">{{ infos.jobCount }}</div>
      </div>
      <div class="w1">
        <div class="w11">
          <img src="@/assets/images/_1.gif" alt="" />
          <span>{{ $t("all.jinrijiangli") }}</span>
        </div>
        <div class="w12">{{ infos.todayReward || 0 }} USDT</div>
      </div>
      <div class="btbox">
        <div
          :class="infos.jobCount > 0 ? 'wbtn' : 'wbtn whui'"
          @click="handleWork"
        >
          {{ $t("all.kaishirenwu") }}
        </div>
        <img @click="toRecharge" src="@/assets/images/shengji.png" alt="" />
      </div>
    </div>
    <div class="wbox" style="margin-top: 190px">
      <van-divider
        :style="{
          color: '#b00c0c',
          borderColor: '#b00c0c',
          padding: '0 16px',
          fontWeight: '600',
        }"
      >
        VIP{{ $t("all.jiangli") }}
      </van-divider>
      <div class="tbox">
        <div class="tb1">
          <div class="tab1-1">{{ $t("all.dengji") }}</div>
          <div class="tab1-1">{{ $t("all.chongzhi") }}</div>
          <div class="tab1-1">{{ $t("all.yaoqing") }}</div>
          <div class="tab1-1">{{ $t("all.cishu") }}</div>
          <div class="tab1-1">{{ $t("all.jiangli") }}</div>
          <!-- <div class="tab1-1">{{ $t("all.tiaojian") }}</div> -->
        </div>
        <div class="tab2" v-for="item in vipList" :key="item.level">
          <div class="tab2-1">Lv{{ item.level }}</div>
          <div class="tab2-1">{{ `${item.condition}U` }}</div>
          <div class="tab2-1">{{ `${item.userCondition}PPL` }}</div>
          <div class="tab2-1">{{ item.count }}</div>
          <div class="tab2-1">{{ item.reward }}%</div>
          <!-- <div class="tab2-1">
            {{ item.condition }}U{{ $t("all.huo") }}{{ item.userCondition
            }}{{ $t("all.yaoqing") }}
          </div> -->
        </div>
      </div>
    </div>
    <div class="wbox">
      <van-divider
        :style="{
          color: '#b00c0c',
          borderColor: '#b00c0c',
          padding: '0 16px',
          fontWeight: '600',
        }"
      >
        {{ $t("all.fenxiang") }}
      </van-divider>
      <div class="fff">
        {{ $t("all.sharetext") }}
      </div>
      <div class="btn1" @click="handleCopy">{{ $t("all.fuzhi") }}</div>
      <div class="tbox" style="padding: 24px 20px 0">
        <div style="display: flex; flex-wrap: wrap; margin-bottom: 24px">
          <div class="xx" v-for="item in shareList" :key="item.url">
            <img :src="item.icon" alt="" @click="toWebView(item)" />
            <!-- <span
            ><span @click="toWebView(item.url)">{{ item.url }}</span>
            <img
              @click="copyDomText(item.url)"
              src="@/assets/images/fuzhi.png"
              alt=""
          /></span> -->
          </div>
        </div>
        <div class="tip">{{ $t("all.shangchuantip") }}</div>
        <van-uploader :after-read="afterRead" />
      </div>
    </div>
    <div style="height: 40px"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import http from "@/utils/http";
import { useStore } from "@/store";
import { Toast } from "vant";
import { copyDomText } from "@/utils/common";
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const router = useRouter();
const vipList = ref<any[]>([]);
const shareList = ref([
  {
    url: "fb://",
    h5url: "https://www.facebook.com/",
    icon: require("@/assets/images/facebook.png"),
  },
  {
    url: "twitter://",
    h5url: "https://www.twitter.com/",
    icon: require("@/assets/images/tuite.png"),
  },
  {
    url: "youtube://",
    h5url: "https://www.youtube.com/",
    icon: require("@/assets/images/youtube.png"),
  },
  {
    url: "instagram://",
    h5url: "https://www.instagram.com/",
    icon: require("@/assets/images/instagram.png"),
  },
  {
    url: "whatsapp://",
    h5url: "https://www.whatsapp.com/",
    icon: require("@/assets/images/whatsapp.png"),
  },
]);
const store = useStore();
const infos = computed(() => store.state.users.infos);
onMounted(() => {
  getVipInfo();
});
const getVipInfo = async () => {
  const ret: any = await http.get("config/list");
  if (ret.code === 200) {
    vipList.value = ret.data;
  }
  // const ret2: any = await http.get("share/config/app/list");
  // if (ret2.code === 200) {
  //   shareList.value = ret2.data;
  // }
};
const handleWork = async () => {
  if (infos.value.jobCount <= 0) {
    Toast(globalProperties.$t("all.shengyucishubuzu"));
    return;
  }
  const ret: any = await http.post("job/record/do");
  if (ret.code === 200) {
    store.dispatch("users/getUserInfo");
    Toast(globalProperties.$t("all.chenggong"));
  }
};
const toRecharge = () => {
  router.push("/capital/recharge");
};
const base64ToFile = (dataurl: string, filename: string) => {
  let arr: any = dataurl.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime });
};
const afterRead = (file: any) => {
  // 此时可以自行将文件上传至服务器
  console.log(file.content);
  let formData = new FormData();
  formData.append("file", base64ToFile(file.content, "file"));
  http.post("share/record/upload", formData).then((res: any) => {
    if (res.code === 200) {
      Toast(globalProperties.$t("all.uploadSuccess"));
    }
  });
};
const handleCopy = () => {
  copyDomText(
    globalProperties.$t("all.sharetext") +
      "   Link: https://www.coinbase-metamining.com/home?invitationCode=" +
      infos.value.invitationCode
  );
};
const toWebView = (item: any) => {
  window.location.href = item.url;
  setTimeout(() => {
    window.location.href = item.h5url;
  }, 1000);
  // window.open(url);
  // router.push({
  //   path: "/webview",
  //   query: {
  //     wurl: url,
  //   },
  // });
};
</script>

<style lang="scss" scoped>
.wkimg {
  width: 100vw;
  display: block;
  margin: 0px auto;
  height: 50vh;
  border-radius: 0 0 18px 18px;
}
.wkimg2 {
  position: absolute;
  top: 0vh;
  left: 50%;
  transform: translateX(-50%);
  width: 56vw;
  height: 30vh;
}
.wbox {
  width: calc(80vw + 40px);
  padding: 10px 0;
  margin: 20px auto 0;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 20px 0 rgb(10 20 111 / 5%),
    1px 1px 1px 0 hsl(0deg 0% 100% / 30%);
  .w1 {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    .w11 {
      display: flex;
      align-items: center;
      color: #5a5a5a;
      font-size: 13px;
      img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 4px;
      }
    }
    .w12 {
      font-size: #323234;
      font-weight: 600;
    }
  }
}
.btbox {
  display: flex;
  margin: 10px 20px;
  align-items: center;
  img {
    width: 40px;
    flex: 0 0 40px;
    margin-left: 15px;
    border-radius: 50%;
  }
}
.wbtn {
  flex: 1;
  border-radius: 200px;
  background-image: linear-gradient(to bottom right, #36b4ea, #0996d3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.whui {
  background: #d9d9d9;
  color: #666;
}
.tbox {
  margin: 10px 15px;
  padding: 10px 0px;
  // border:1px solid #f1f1f1;
  box-shadow: 0 0 4px #d9d9d9;
  border-radius: 4px;
  .tb1 {
    height: 30px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #7f7f7f;
    .tab1-1 {
      flex: 1;
      &:first-child {
        text-align: left;
        flex: 0 0 58px;
      }
      &:nth-child(2) {
        text-align: center;
        flex: 0 0 54px;
      }
      &:nth-child(3) {
        text-align: center;
        flex: 0 0 54px;
      }
      &:nth-child(4) {
        text-align: center;
        flex: 0 0 64px;
      }
      &:last-child {
        flex: 1;
        text-align: right;
      }
    }
  }
  .tab2 {
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 14px;
    &:nth-child(2n) {
      background: rgba($color: #dae0b6, $alpha: 0.3);
    }
    .tab2-1 {
      flex: 1;
      text-align: center;
      &:first-child {
        text-align: left;
        color: #eacc36;
        font-weight: 600;
        flex: 0 0 50px;
      }
      &:nth-child(2) {
        flex: 0 0 70px;
      }
      &:nth-child(3) {
        flex: 0 0 54px;
      }
      &:nth-child(4) {
        text-align: center;
        flex: 0 0 46px;
      }
      &:last-child {
        flex: 1;
        text-align: right;
        font-size: 13px;
      }
    }
  }
}
.xx {
  display: flex;
  align-items: center;
  flex: 1;
  margin-right: 10px;
  &:last-child {
    margin-right: 0;
  }
  img {
    width: 100%;
  }
  span {
    color: #067496;
    font-size: 13px;
    img {
      width: 12px;
      margin-left: 3px;
    }
  }
}
.zbox {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}
.tip {
  font-size: 12px;
  color: #962a06;
  margin: 10px 0;
}
.fff {
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding: 10px;
  margin: 20px;
  font-size: 13px;
  color: #333;
  line-height: 24px;
}
.btn1 {
  height: 40px;
  background-image: linear-gradient(to bottom right, #36b4ea, #0996d3);
  border-radius: 4px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  margin: 10px 20px 20px;
}
</style>
